<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/admin/base/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基本信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>楼宇管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-button type="primary" @click="exportExcelSelect">导出文件</el-button>

    <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        id='out-table'
    >
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
    </el-table>

    <el-dialog title="sfsd" :visible.sync="selectWindow">

      <el-table :data="selectData" id="selecTable" height="380px">

        <el-table-column
            prop="date"
            label="日期">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>

      </el-table>

      <div style="margin-top: 20px" slot="footer" class="dialog-footer">
        <el-button @click="exportExcel" type="primary">dadas</el-button>
      </div>

    </el-dialog>


  </div>
</template>


<script>
//引入安装的依赖
import htmlToExcel from "@/utils/htmlToExcel";

export default {
  name: "TablePage",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      selectData: [],
      selectWindow: false,
    }
  },
  methods: {

    // XLSX.uitls.table_to_book( 放入的是table 的DOM 节点 ) ，sheetjs.xlsx 即为导出表格的名字，可修改！
    exportExcel() {
      htmlToExcel.getExcel('#selecTable', '导出的自定义标题')
    },

    handleSelectionChange(val) {
      this.selectData = val;
    },

    exportExcelSelect() {
      this.selectData = this.tableData
      if (this.selectData.length < 1) {
        this.$message.error('usiewri');
        return false;
      }
      this.selectWindow = true;
    },


  }
}
</script>

<style scoped>
.el-table {
  margin-top: 30px;
}
</style>